<template>
	<view class="card_1">
		<view class="card-item" v-for="item in items" @click="to(item)">
			<text class="item-text">
				{{item.title}}
			</text>
			<image class="item-image" :src="item.src"></image>
		</view>
		<view class="line-r"></view>
		<view class="line-c"></view>
	</view>
</template>

<script>
	export default {
		props:{
			items:{
				type:Array
			}
		},
		data() {
			return {

			};
		},
		methods:{
			to(item){
				uni.navigateTo({
					url:item.page
				})
			}
		}
	}
</script>

<style lang="scss">
	.card_1 {
		padding: 10rpx;
		margin-bottom: 20rpx;
		display: flex;
		box-sizing: border-box;
		flex-wrap: wrap;
		border-radius: 30rpx;
		background-color: #fff;
		//border: 2rpx green solid;
		justify-content: center;
		align-items: center;
		position: relative;
		.card-item {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			//border: 2rpx red solid;	
			flex-grow: 1;
			height: auto;
			
			.item-text {
				font-size: 32rpx;
			}

			.item-image {
				width: 60rpx;
				height: 60rpx;
				margin-left: 60rpx;
			}
		}
		
		.line-r{
			border-top: 2rpx #ebebeb solid;
			position: absolute;
			width: 90%;
			top: 50%;
			left: 5%;
		}
		
		.line-c{
			border-left: 2rpx #ebebeb solid;
			position: absolute;
			height: 90%;
			top: 5%;
			left: 50%;
		}
	}
</style>
